<template>
  <el-container style="height: 100%">
    <el-aside width="200px">
      <Menu
        v-if="options.length"
        :itemLeft="70"
        :options="options"
        size="large"
        :defaultActive="currentActiveKey"
        @select="onSelect"
      ></Menu>
      <div style="margin: -100px 0 0 30px">
        <h5>空间使用</h5>
        <el-progress
          :percentage="userInfo.storageUsedPercentage"
          :text-inside="true"
          :stroke-width="20"
          striped
          :color="['#409EFF', '#67C23A']"
          style="width: 90%; margin: 10px 0"
        ></el-progress>
        <div style="height: 24px; line-height: 24px; font-size: 12px">
          <span>
            {{ userInfo.storageUsedFormatted }} /
            {{ userInfo.storageTotalFormatted }}
          </span>
          <ElIcon style="cursor: pointer; margin-left: 10px" @click="getSpace">
            <Refresh />
          </ElIcon>
        </div>
      </div>
    </el-aside>
    <el-container>
      <el-main>
        <slot name="default"></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Menu } from '@/components/index.js'
import { useUserStore } from '@/stores/user'
import service from '@/utils/api'
import { URLS } from '@/constants'

const { options = [] } = defineProps(['options'])

const router = useRouter()

const route = useRoute()

const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)

const currentActiveKey = computed(
  () => route.path.split('/').filter(Boolean)[1] || options[0]?.meta?.key
)

const switchRoute = menuItem => {
  if (menuItem.meta.key === route.meta.key) return
  router.push(menuItem.path)
}

const onSelect = menuItem => {
  switchRoute(menuItem)
}

const getSpace = async () => {
  await service.get(URLS.GET_USER_INFO).then(res => {
    userStore.setUserInfo(res.data)
  })
}

onMounted(() => {
  getSpace()
})
</script>

<style scoped>
.el-aside {
  box-shadow: 0 0 2px var(--base-grey);
}
.el-icon {
  vertical-align: middle;
}
</style>
